<template>
    <div class="out-style">
        <Modal v-model="isShow" :title=cateTitle :closable="false" :mask-closable="false" class="global-modal-line">
            <template>
            <Spin size="large" fix v-if="spinShow"></Spin>
            <Form :model="formItem" :label-width="80">
                <FormItem label="分类名称">
                    <Input v-model="formItem.title" placeholder="请输入分类名称"></Input>
                </FormItem>
                <FormItem label="创建时间">
                    <DatePicker v-model="formItem.create_time" type="date" style="width: 200px"></DatePicker>
                </FormItem>
            </Form>
            </template>
            <div slot="footer">
                <Button type="text" @click="cancelAction()">取消</Button>
                <Button type="success" @click="handleSubmit()">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getCategoryById } from '@/api/manager'

export default {
  name: 'AddEditCategory',
  props: {
    type: {
      type: String,
      default: () => {
        return 'add'
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    id: {
      type: String,
      default: () => {
        return {}
      }
    },
    cateTitle: {
      type: String,
      default: () => {
        return '添加分类'
      }
    }
  },
  data () {
    return {
      formItem: {
        id: '',
        title: '',
        create_time: ''
      },
      spinShow: false,
      btnLading: false
    }
  },
  methods: {
    cancelAction () {
      this.$emit('cancel')
    },
    handleSubmit (formItem) {
      this.$emit('results', this.formItem)
    },
    useIdByInfo () {
      let param = this.id
      this.spinShow = true
      getCategoryById(param).then(ret => {
        this.spinShow = false
        this.formItem.id = ret.data.data.list[0].id
        this.formItem.title = ret.data.data.list[0].title
        this.formItem.create_time = ret.data.data.list[0].create_time
      })
    }
  },
  watch: {
    isShow (data) {
      if (this.isShow) {
        if (this.type === 'edit') {
          this.useIdByInfo()
        }
      } else {
        this.formItem = {
          title: '',
          create_time: ''
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
